<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctx}/resources/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
</head>
<body style="margin: 10px">
<blockquote class="layui-elem-quote">
    <form class="layui-form" id="searchFrm" lay-filter="searchFrm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">登陆名</label>
                <div class="layui-input-inline">
                    <input type="text" placeholder="请输入登陆名" name="username" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">真实姓名</label>
                <div class="layui-input-inline">
                    <input type="text" placeholder="请输入真实姓名" name="realname" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">在职状态</label>
                <div class="layui-input-inline">
                    <input type="radio" value="1" name="deleted" title="在职">
                    <input type="radio" value="2" name="deleted" title="离职">
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="doSearch">查询</button>
                <button type="reset" class="layui-btn layui-btn-danger">重置</button>
            </div>
        </div>
    </form>
</blockquote>


<table class="layui-hide" id="userTable" lay-filter="userTable"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>

    </div>
</script>

<script type="text/html" id="userTableRowBar">
    <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">离职</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="ret">重置密码</a>
</script>
<%--添加表单开始--%>
<div id="userLayer" style="display: none;margin: 8px">
    <form class="layui-form" id="dataFrm" lay-filter="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">登陆名</label>
            <div class="layui-input-block">
                <!--修改时要提交一个ID到后台-->
                <input type="hidden" name="id">
                <input type="text" name="username" placeholder="请输入登陆名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">真实名称</label>
            <div class="layui-input-block">
                <input type="text" name="realname" placeholder="请输入真实名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <input type="radio" value="1" name="role" title="管理员" >
                <input type="radio" value="2" name="role" title="业务员" checked >
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit">保存</button>
            <button type="reset" class="layui-btn layui-btn-danger">重置</button>
        </div>
    </form>
</div>
    <%--添加表单结束--%>

</body>
<script src="${ctx}/resources/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="${ctx}/resources/layuimini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use(['form', 'layer', 'table','jquery'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let table = layui.table;
        let layer = layui.layer;

        let userTable = table.render({
            elem: '#userTable'
            , url: '${ctx}/query/queryUser.action'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
            }]
            , title: '用户数据表'
            , height: 'full-200'
            , cols: [[
                {field: 'id', title: 'ID', align: "center"}
                , {field: 'username', title: '登陆名', align: "center"}
                , {field: 'realname', title: '真实名', align: "center"}
                , {
                    field: 'role', title: '角色', align: "center", templet: function (d) {
                        let str = "";
                        if (d.role == 1) {
                            str = "<font color='blue' >管理员</font>"
                        } else if (d.role == 2) {
                            str = "<font color='purple' >业务员</font>"
                        }
                        return str;
                    }
                }
                , {
                    field: 'deleted', title: '在职状态', align: "center", templet: function (d) {
                        let str = "";
                        if (d.deleted == 1) {
                            str = "<font color='blue' >在职</font>"
                        } else if (d.deleted == 2) {
                            str = "<font color='red' >离职</font>"
                        }
                        return str;
                    }
                }
                , {field: 'createTime', title: '创建时间', align: "center"}
                , {field: 'updateTime', title: '更新时间', align: "center"}
                , {field: 'deletedTime', title: '离职时间', align: "center"}
                , {fixed: 'right', title: '操作', align: "center", toolbar: '#userTableRowBar', width: 249}
            ]]
            , page: true
        });

        form.on("submit(doSearch)", function (data) {
            let param = data.field;
            userTable.reload({
                page: {
                    curr: 1
                },
                where: param
            })
        });


        //头工具栏事件
        table.on('toolbar(userTable)', function (obj) {
            switch (obj.event) {
                case "add":
                    openAddUser();
                    break;
            }
            ;
        });

        table.on('tool(userTable)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
              deleteUser(data);
            } else if (obj.event === 'update') {
                openUpdateUser (data);
            }else if (obj.event === 'ret'){
                resetPwd(data);
            }
        });

        let index = 0;

        let url = "";

        function openAddUser (){
            index = layer.open({
                type:1,
                content: $("#userLayer"),
                area:['500','400'],
                title:'添加用户',
                success:function (){
                    $("#dataFrm")[0].reset();
                    url="${ctx}/query/add.action"
                }
            })
        }
        function openUpdateUser (data){
            index = layer.open({
                type:1,
                content: $("#userLayer"),
                area:['500','400'],
                title:"修改【"+data.realname+"】用户",
                success:function (){
                    form.val('dataFrm',data)
                    url="${ctx}/query/update.action"
                }
            })
        }
        function deleteUser(data){
            layer.confirm('真的让【'+data.realname+'】离职吗?', function(index){
                $.post("${ctx}/query/delete.action",{id:data.id},function (res) {
                    if(res.code==200){
                        layer.msg(res.msg);
                        layer.close(index);
                        //刷新表格
                        userTable.reload();
                    }else{
                        layer.msg(res.msg);
                    }
                })
            });
        }
        //重置密码
        function resetPwd(data) {
            layer.confirm('真的要重置【'+data.realname+'】用户的密码吗?', function(index){
                $.post("${ctx}/query/resetPwd.action",{id:data.id},function (res) {
                    if(res.code==200){
                        layer.msg(res.msg);

                        layer.close(index);
                    }else{
                        layer.msg(res.msg);
                    }
                })
            });
        }
        form.on("submit(doSubmit)", function (data) {
            let param = data.field;
            $.post(url,param,function (res){
                if (res.code==200){
                    layer.msg(res.msg);
                    userTable.reload();
                    layer.close(index);
                }else {
                    layer.msg(res.msg)
                }
            })
        });
    });
</script>
</html>
